<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.10.0/ui-grid.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/4.10.0/ui-grid.min.css" type="text/css" />
</head>

<body>
    <div ng-controller="CustomerController">
      <div ui-grid="gridOptions" class="grid"></div>
    </div>
 
  

    <script>
// Define your AngularJS app module
var app = angular.module('myApp', ['ui.grid']);

// Create a controller for the customer data
app.controller('CustomerController', function($scope, $http) {
  $scope.gridOptions = {
    columnDefs: [
      { name: 'id', displayName: 'ID' },
      { name: 'name', displayName: 'Name' },
      { name: 'surname', displayName: 'Surname' }
    ],
    enableGridMenu: true,
    enableSorting: true,
    enableFiltering: true
  };

  // Fetch customer data from the REST service
  $http.get('rest/customers')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    })
    .catch(function(error) {
      console.error('Error retrieving customer data:', error);
    });
});

    </script>

</body>
</html>
